<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Camera H5</title>
</head>
<body>
    <!-- 用于显示相机视频的<video>元素 -->
    <video id="video" autoplay playsinline></video>
    <!-- 用于切换前后摄像头的按钮 -->
    <button id="switchButton">Switch Camera</button>
 
    <script>
        // 获取视频元素和切换按钮元素
        var video = document.getElementById("video");
        var switchButton = document.getElementById("switchButton");
 
        // 获取用户媒体流并显示相机画面
        navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
            .then(function (stream) {
                video.srcObject = stream;
            })
            .catch(function (error) {
                console.log("Error accessing camera: " + error);
            });
 
        // 切换前后摄像头
        switchButton.addEventListener("click", function () {
            if (video.srcObject) {
                var videoTracks = video.srcObject.getVideoTracks();
                if (videoTracks.length > 0) {
                    var facingMode = videoTracks[0].getSettings().facingMode;
                    var newFacingMode = (facingMode === "user") ? "environment" : "user";
 
                    navigator.mediaDevices.getUserMedia({ video: { facingMode: newFacingMode } })
                        .then(function (stream) {
                            video.srcObject = stream;
                        })
                        .catch(function (error) {
                            console.log("Error switching camera: " + error);
                        });
                }
            }
        });
    </script>
</body>
</html>